<template>
  <el-select
    v-bind="$attrs"
    v-model="selectValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    :multiple-limit="multipleLimit"
    :size="size"
    :filterable="filterable"
    :allow-create="allowCreate"
    :filter-method="filterMethod"
    :remote="remote"
    :remote-method="remoteMethod"
    :loading="loading"
    :loading-text="loadingText"
    :no-match-text="noMatchText"
    :no-data-text="noDataText"
    :popper-class="popperClass"
    :reserve-keyword="reserveKeyword"
    :default-first-option="defaultFirstOption"
    :teleported="teleported"
    :persistent="persistent"
    :automatic-dropdown="automaticDropdown"
    :clear-icon="clearIcon"
    :fit-input-width="fitInputWidth"
    :suffix-icon="suffixIcon"
    :tag-type="tagType"
    :effect="effect"
    :validate-event="validateEvent"
    @change="handleChange"
    @visible-change="handleVisibleChange"
    @remove-tag="handleRemoveTag"
    @clear="handleClear"
    @blur="handleBlur"
    @focus="handleFocus"
  >
    <slot />
  </el-select>
</template>

<script>
export default {
  name: 'MyElSelect',
  inheritAttrs: false,
  props: {
    modelValue: {
      type: [String, Number, Array],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    collapseTags: {
      type: Boolean,
      default: false
    },
    collapseTagsTooltip: {
      type: Boolean,
      default: false
    },
    multipleLimit: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['large', 'default', 'small'].includes(value)
      }
    },
    filterable: {
      type: Boolean,
      default: false
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    filterMethod: {
      type: Function,
      default: undefined
    },
    remote: {
      type: Boolean,
      default: false
    },
    remoteMethod: {
      type: Function,
      default: undefined
    },
    loading: {
      type: Boolean,
      default: false
    },
    loadingText: {
      type: String,
      default: '加载中'
    },
    noMatchText: {
      type: String,
      default: '无匹配数据'
    },
    noDataText: {
      type: String,
      default: '无数据'
    },
    popperClass: {
      type: String,
      default: ''
    },
    reserveKeyword: {
      type: Boolean,
      default: true
    },
    defaultFirstOption: {
      type: Boolean,
      default: false
    },
    teleported: {
      type: Boolean,
      default: true
    },
    persistent: {
      type: Boolean,
      default: true
    },
    automaticDropdown: {
      type: Boolean,
      default: false
    },
    clearIcon: {
      type: [String, Object],
      default: 'Close'
    },
    fitInputWidth: {
      type: Boolean,
      default: false
    },
    suffixIcon: {
      type: [String, Object],
      default: 'ArrowDown'
    },
    tagType: {
      type: String,
      default: '',
      validator: (value) => {
        return ['', 'success', 'info', 'warning', 'danger'].includes(value)
      }
    },
    effect: {
      type: String,
      default: 'light',
      validator: (value) => {
        return ['light', 'dark'].includes(value)
      }
    },
    validateEvent: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'change', 'visible-change', 'remove-tag', 'clear', 'blur', 'focus'],
  computed: {
    selectValue: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value)
    },
    handleVisibleChange(visible) {
      this.$emit('visible-change', visible)
    },
    handleRemoveTag(value) {
      this.$emit('remove-tag', value)
    },
    handleClear() {
      this.$emit('clear')
    },
    handleBlur(event) {
      this.$emit('blur', event)
    },
    handleFocus(event) {
      this.$emit('focus', event)
    }
  }
}
</script> 